<template>
  <el-date-picker
    v-bind="$attrs"
    v-model="currentVal"
    :picker-options="pickerOptions"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    v-on="$listeners">
  </el-date-picker>
</template>
<script>
export default {
  name: 'DatePicker',
  props: {
    // 当前值
    value: {
      type: [String, Array],
      default: () => []
    }
  },
  data() {
    return {
      pickerMinDate: '',
      // 限制计划下单日期选择范围(普遍用法)
      pickerOptions: {
        onPick: obj => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate: time => {
          // const date = new Date(row.planOrderDate + ' ' + '00:00:00')
          const date1 = new Date('2024-01-20 00:00:00');
          const date2 = new Date('2025-01-20 00:00:00');
          const arrayTime1 = date1.getTime();
          const arrayTime2 = date2.getTime();
          return time.getTime() < arrayTime1 || time.getTime() > arrayTime2;
        },
        // 禁用今天之前的时间
        // disabledDate: (time) => {
        //   let nowDate = new Date()
        //   nowDate = new Date(nowDate.setDate(nowDate.getDate() - 1))
        //   return time < nowDate
        // },
        // 禁用今天之前和10天之后的时间
        // disabledDate: (time) => {
        //   const curDate = (new Date()).getTime()
        //   const minDate = new Date(new Date().setDate(new Date().getDate() - 1))
        //   // 最大日期为 当前日期 + 十天跨度的毫秒数
        //   const maxDate = curDate + (10 * 24 * 60 * 60 * 1000)
        //   return time < minDate || time.getTime() > maxDate
        // }
      },
    };
  },
  computed: {
    currentVal: {
      set(val) {
        // 通过.sync修饰符传值可以使用
        // this.$emit('update:value', val)
        // 通过v-model传值需要触发默认的input事件
        this.$emit('input', val);
      },
      get() {
        if (this.value === null) this.$emit('input', []);
        return this.value;
      }
    }
  }
};
</script>
